<!--
 * @Description: 
 * @Date: 2022-05-05 08:45:48
 * @LastEditTime: 2023-12-11 10:53:07
 * @FilePath: \vue3\src\views\home.vue
-->
<template>
  <div :class="['all-body']">
    <el-container>
      <el-header>
        <div class="head-content">
          <div class="head-title">学习的杂货铺</div>
          <el-switch
            class="change-toggle"
            inline-prompt
            v-model="test"
            :before-change="beforeChangeManage.bind()"
            @change="change"
            :loading="loading"
          ></el-switch>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="leftwidth">
          <el-switch
            class="change-toggle"
            inline-prompt
            @change="changeMenu"
            v-model="menuopen"
          ></el-switch>
          <el-menu
            :default-active="activeIndex"
            @select="changePath"
            unique-opened
          >
            <el-sub-menu
              :index="item.path"
              v-for="item in menuList"
              :key="item.path"
            >
              <template #title>{{ item.name }}</template>
              <el-menu-item
                :index="children.path"
                v-for="children in item.chilrenData"
                :key="children.path"
                >{{ children.name }}</el-menu-item
              >
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { useToggle } from "@vueuse/shared";
import { useDark } from "@vueuse/core";
import {
  onErrorCaptured,
  onMounted,
  onRenderTracked,
  ref,
  getCurrentInstance,
} from "@vue/runtime-core";
import { useRouter } from "vue-router";
import menuMixin from "./menuData.js";
export default {
  setup() {
    let path = ref("");
    onMounted(() => {
      console.log("setup onMounted:" + this);
    });
    onErrorCaptured((err) => {
      console.log("onErrorCaptured:" + err);
      return true;
    });

    onRenderTracked((event) => {
      console.log("状态跟踪组件");
      console.log(event);
    });
    let router = useRouter();
    function changePath(e) {
      console.log(e);
      router.push(e);
    }
    let curView = ref(); //当前页面

    const theme = ref(false);

    const isDark = useDark({
      // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
      storageKey: "useDarkKEY",
      // 暗黑class名字
      valueDark: "dark",
      // 高亮class名字
      valueLight: "light",
      onChanged(dark) {
        // if (dark) {
        //   document.documentElement.style.setProperty("--test-color", "#333");
        // } else {
        //   document.documentElement.style.setProperty("--test-color", "#ffffff");
        // }
      },
    });
    const toggle = useToggle(isDark);
    let num = ref(0);
    let test = ref(true);
    let menuopen = ref(true);
    
    let loading = ref(false);
    const beforeChangeManage = (row) => {
      console.log("beforeChangeManage----------------------");
      return new Promise((resolve, reject) => {
        loading.value = true;
        if (test.value) {
          setTimeout(() => {
            console.log("对呢", test.value);
            test.value = !test.value;
            return resolve();
          }, 2000);
        } else {
          setTimeout(() => {
            console.log("报错了", test.value);
            return reject(new Error("Error"));
          }, 2000);
        }
      }).finally(() => {
        loading.value = false;
      });
    };
    const change = (val) => {
      console.log("change----------------------", test.value);
    };
    const changeMenu = (val) => {
      console.log("change----------------------", test.value);
      leftwidth = 0;
      menuopen = !menuopen
    };

    return {
      path,
      changePath,
      theme,
      toggle,
      isDark,
      beforeChangeManage,
      change,
      test,
      loading,
    };
  },
  mounted() {
    console.log("mounted:" + this.menuList);
  },
  mixins: [menuMixin],
  data() {
    return {
      name: "hash",
      activeIndex: "/",
      leftwidth: "200px",
    };
  },
};
</script>
<style scoped lang="scss">
.el-header {
  width: 100% !important;
  margin: 0px;
  padding: 0px;
}

:deep(.el-menu) {
  background-color: transparent !important;
}
// .el-menu--horizontal{
//   // background-color: transparent !important;
//   // background-image: url('../assets/bizhi2.jpg');
// }

.all-body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: var(--test-bg-color);
  // background-color: var(--test-color);
}
.head-content {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  position: relative;
  padding-top: 10px;
  .head-title {
    position: absolute;
    left: 50%;
    top: 50%;
  }
  .change-toggle {
    position: absolute;
    right: 20%;
    top: 50%;
  }
}

body::-webkit-scrollbar {
  display: none;
}

:deep(.el-main) {
  padding: 0px !important;
  margin: 0px !important;
  width: 100%;
  height: 100%;
}
</style>
